<html>
    <head>
        <title>声明响应式属性</title>
    </head>
    <body>
        <script>
            // 三、声明响应式属性 property
                            /*
                                由于Vue不允许动态添加根级别的响应式 property,所以你必须在初始化实例签声明所有根级响应式 property,哪怕只是一个空值：
                            */
                            var vm= new Vue({
                                        data:{
                                            // 声明一个 message 为一个空字符串
                                            message:''
                                        },
                                        template:'<div>{{message}}</div>'
                                    })

                                    // 之后设置 'message'
                                    vm.message = 'Hello';
                             /*
                                如果你未在 data 选项中声明 message, Vue将警告你渲染函数正在视图访问不存在的 property.

                                这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使Vue实例能够更好地配合类型检查系统工作。

                                但与此同时，在代码可维护性方面也有一点重要的考虑： data 对象就像组件状态的结构。

                                提前声明所有的响应式 property ,可以让组件代码在未来修改或者其他开发人员阅读时更容易理解。
                             */
        </script>
    </body>
</html>